<template>
  <div class="app-container">
    <div class="tabs-container">
      <el-tabs
        v-model="tabType"
        type="card"
        @tab-click="changeTab"
      >
        <el-tab-pane
          :label="$t('tenant.tenantInfo.baseInfo')"
          name="baseInfo"
        />
        <el-tab-pane
          :label="$t('tenant.tenantInfo.adminInfo')"
          name="adminInfo"
        />
        <el-tab-pane
          :label="$t('tenant.tenantInfo.authProduct')"
          name="authProduct"
        />
        <el-tab-pane
          :label="$t('tenant.tenantInfo.costView')"
          name="costView"
        />
      </el-tabs>
    </div>
    <!-- 商户信息 -->
    <div
      v-if="tabType=='baseInfo'"
      class="form-container form-3"
    >
      <el-form
        :model="baseInfo"
        :inline="true"
      >
        <el-form-item
          :label="$t('tenant.tenantInfo.merchantCode')"
          label-width="130px"
          prop="merchantCode"
        >
          <el-input
            v-model="baseInfo.merchantCode"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.tenantInfo.fullName')"
          label-width="130px"
          prop="fullName"
        >
          <el-input
            v-model="baseInfo.fullName"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.tenantInfo.simpleName')"
          label-width="130px"
          prop="simpleName"
        >
          <el-input
            v-model="baseInfo.simpleName"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.tenantInfo.categoryFlg')"
          label-width="130px"
          prop="categoryFlg"
        >
          <el-select
            v-model="baseInfo.categoryFlg"
            :disabled="disabled"
          >
            <el-option
              v-for="(item,index) in categoryList"
              :key="index"
              :label="item.codeName"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('tenant.tenantInfo.registerAddress')"
          label-width="130px"
          prop="registerAddress"
        >
          <el-input
            v-model="baseInfo.registerAddress"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.tenantInfo.licenseNumber')"
          label-width="130px"
          prop="licenseNumber"
        >
          <el-input
            v-model="baseInfo.licenseNumber"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.tenantInfo.businessTerm')"
          label-width="130px"
          prop="businessTerm"
        >
          <el-input
            v-model="baseInfo.businessTerm"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.tenantInfo.businessScope')"
          label-width="130px"
          prop="businessScope"
        >
          <el-input
            v-model="baseInfo.businessScope"
            :disabled="disabled"
          />
        </el-form-item>

        <el-form-item
          :label="$t('tenant.tenantInfo.status')"
          label-width="130px"
          prop="status"
        >
          <el-select
            v-model="baseInfo.status"
            :disabled="disabled"
          >
            <el-option
              label="启用"
              value="1"
            />
            <el-option
              label="禁用"
              value="0"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('tenant.tenantInfo.filePath')"
          label-width="130px"
          prop="fullPath"
          style="width:100%"
        >
          <img
            v-if="baseInfo.filePath"
            :src="baseInfo.filePath"
            class="avatar"
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 管理员信息 -->
    <div
      v-if="tabType=='adminInfo'"
      class="form-container form-3"
    >
      <el-form
        :model="adminInfo"
        :inline="true"
      >
        <el-form-item
          label="管理员姓名"
          label-width="130px"
          prop="userName"
        >
          <el-input
            v-model="adminInfo.userName"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          label="管理员账号"
          label-width="130px"
          prop="userAccount"
        >
          <el-input
            v-model="adminInfo.userAccount"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          label="管理员手机号"
          label-width="130px"
          prop="telephone"
        >
          <el-input
            v-model="adminInfo.telephone"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          label="管理员邮箱"
          label-width="130px"
          prop="email"
        >
          <el-input
            v-model="adminInfo.email"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          label="管理员身份证号码"
          label-width="130px"
          prop="cardId"
        >
          <el-input
            v-model="adminInfo.cardId"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          label="管理员身份证有限期"
          label-width="140px"
          prop="idCardExpiresEnd"
        >
          <el-input
            v-model="adminInfo.idCardExpiresEnd"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item
          label="管理员身份证"
          label-width="130px"
          prop="idCardPhotoFrontUrl"
          style="width:100%"
        >
          <img
            v-if="adminInfo.idCardPhotoFrontUrl"
            :src="adminInfo.idCardPhotoFrontUrl"
            class="avatar"
          >
          <img
            v-if="adminInfo.idCardPhotoBackUrl"
            :src="adminInfo.idCardPhotoBackUrl"
            class="avatar"
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 授权产品 -->
    <DataTable
      v-if="tabType=='authProduct'"
      :table-data="authTableData"
      :column="authColumn"
    />
    <!-- 费用查看 -->
    <DataTable
      v-if="tabType=='costView'"
      :table-data="viewTableData"
      :column="viewColumn"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DataTable from '@/components/DataTable'
import merchantApi from '@/api/tenant/merchant'
export default {
  name: '',
  components: {
    DataTable
  },
  data() {
    return {
      tabType: 'baseInfo',
      disabled: true,
      // 表格参数
      authColumn: {
        // 表头
        data: [
          {
            label: '产品名称',
            prop: 'productName',
            show: true
          },
          {
            label: '版本号',
            prop: 'version',
            show: true
          },
          {
            label: '开通时间',
            prop: 'updateTime',
            show: true
          }
        ]
      },
      authTableData: [],
      viewColumn: {
        // 表头
        data: [
          {
            label: '日期',
            prop: 'transactionDate',
            show: true
          },
          {
            label: '变动',
            prop: 'transactionType',
            show: true
          },
          {
            label: '数值',
            prop: 'transactionAmount',
            show: true
          }
        ]
      },
      viewTableData: [],
      baseInfo: {},
      adminInfo: {},
      categoryList: []
    }
  },
  computed: {
    ...mapState({
      merchantCode: state => state.user.merchantCode
    })
  },
  created() {
    this.$nextTick(() => {
      this.getCategory()
      this.getListBySearch()
    })
  },
  methods: {
    getCategory() {
      merchantApi.getSetting('MERCHANTCATEGORY').then(res => {
        this.categoryList = res.data
      })
    },
    // 获取列表数据
    getListBySearch() {
      merchantApi.getAllMerchant({ merchantCode: this.merchantCode }).then((res) => {
        const info = res.data
        const authList = []
        info.merchantProductAuthList.map(v => {
          // eslint-disable-next-line eqeqeq
          if (v.authStatus == '0') {
            authList.push(v)
          }
        })
        this.authTableData = authList
        this.viewTableData = info.merchantCostListList
        this.baseInfo = info.merchantInfoVO
        this.adminInfo = info.merchantUserInfoVO
      })
    },
    // tab
    changeTab(val) {

    }
  }
}
</script>

<style lang="scss" scoped>
.avatar{
    margin-right: 30px;
    border: 1px solid #cccc;
    display: inline-flex;
    width:200px;
    height: 200px;
}
</style>

